<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/htmlstyle/edit.js" charset="utf-8"></script>
<div id="editDemo">
	<div title='API' tabid='tab1' style="line-height: 200%">
	<h2>所有表单采用流布局</h2>
	<div>
	<pre>
	<font color="green">//所有的表单以form标签定义，class必须包括ccay-form，如果需要做验证的表单class加上init</font>
	<font color="blue">&lt;form class="init ccay-form" &gt;</font>
	<font color="green">//区域内容以div标签包括，基础class="ccay-form-body"</font>
	<font color="blue">&lt;div class="ccay-form-body"&gt;</font>
	<font color="green">//主内容使用ul标签</font>
	<font color="blue">&lt;ul&gt;</font>
	<font color="green">//录入单位为一个title和一个input为主体，以li标签，基础class="ccay-form-row"，另外根据不同需求可以加入相应的class</font>
	<font color="blue">&lt;li class="ccay-form-row"&gt;</font>
	<font color="green">//title使用为samp标签，无基础样式，需要国际化处理的加上i18n样式，以及国际化属性i18nKey</font>
	<font color="blue">&lt;samp class="i18n" i18nKey="label.htmlarea.category"&gt;text xxxx xxxxxxx xxxxx&lt;/samp&gt;</font>
	<font color="green">//input或者View内容使用span标签, class='ccay-form-input'</font>
	<font color="blue">&lt;span class='ccay-form-input'&gt;&lt;input id='txtText'  type="text" /&gt;&lt;/span&gt;</font>
	<font color="blue">&lt;/li&gt;</font>
	<font color="blue">&lt;li class="ccay-form-row"&gt;</font>
	<font color="blue">&lt;samp&gt;date&lt;/samp&gt;</font>
	<font color="green">//View内容,span标签下使用label标签></font>
	<font color="blue">&lt;span class='ccay-form-input'&gt;&lt;label /&gt;&lt;/span&gt;</font>
	<font color="blue">&lt;/li&gt;</font>
	<font color="blue">&lt;/ul&gt;</font>
	<font color="blue">&lt;/div&gt;</font>
	<font color="green">//操作区域与内容同级，div标签，class="ccay-operate" 内部可以使用input[button]和link button(a标签)</font>
	<font color="blue">&lt;div class="ccay-operate"&gt;</font>
	<font color="blue">&lt;input type="button" value="Input Button" /&gt;</font>
	<font color="blue">&lt;/div&gt;</font>
	<font color="blue">&lt;/form&gt;</font>
	</pre>
	</div>
	<hr>
	<h2>流布局元素扩展使用说明</h2>
	<h4></h4>
	<h3>区域内容div</h3>
	<table class="ccay-table">
	<tr>
	<td width="20%">样式</td>
	<td width="20%">样式名</td>
	<td width="60%">说明</td>
	</tr>
	<tr>
	<td>基础样式</td>
	<td>ccay-form-body</td>
	<td></td>
	</tr>
	<tr>
	<td>自定义样式</td>
	<td>ccay-form-custom</td>
	<td>自定义格式时使用。如：录入区域或者是显示区域为不确定内容时，或者是动态高度时</td>
	</tr>
	<tr>
	<td>基础样式补充样式</td>
	<td>ccay-form-bodymore</td>
	<td>一般用于上一个区域为自定义样式ccay-form-custom后使用，与基础样式同时使用，如：&lt;div class="ccay-form-body ccay-form-bodymore"&gt;</td>
	</tr>
	<tr>
	<td>自定义样式补充样式</td>
	<td>ccay-form-custommore</td>
	<td>用于在form中自定义样式ccay-form-custom为第一个元素时使用，与基础样式同时使用，如：&lt;div class=" ccay-form-custom ccay-form-custommore"&gt;</td>
	</tr>
	</table>
	
	<h3>单元区域li</h3>
	<table class="ccay-table">
	<tr>
	<td width="20%">样式</td>
	<td width="20%">样式名</td>
	<td width="60%">说明</td>
	</tr>
	<tr>
	<td>基础样式</td>
	<td>ccay-form-row</td>
	<td>此样式必须存在，其他样式都为补充样式</td>
	</tr>
	<tr>
	<td>范围选择样式</td>
	<td>ccay-form-range</td>
	<td>范围选择或前后关联的两个input使用，如，日期选择；列：&lt;li class="ccay-form-row ccay-form-range"&gt;
	</td>
	</tr>
	<tr>
	<td>单区域样式</td>
	<td>ccay-form-whole</td>
	<td>多行文本使用，固定为一整行，不随流布局变化，列：&lt;li class="ccay-form-row ccay-form- whole "&gt;</td>
	</tr>
	<tr>
	<td>长文本样式</td>
	<td>ccay-form-longcell</td>
	<td>单行长文本或者比普通单元格长时使用，列：&lt;li class="ccay-form-row ccay-form- longcell "&gt;</td>
	</tr>
	<tr>
	<td>More样式</td>
	<td>ccay-form-more</td>
	<td>仅针对more等操作单元使用，列：&lt;li class="ccay-form-row ccay-form- more "&gt;</td>
	</tr>
	</table>
	
	<h3>form下其它样式</h3>
	<table class="ccay-table">
	<tr>
	<td width="20%">样式</td>
	<td width="20%">样式名</td>
	<td width="60%">说明</td>
	</tr>
	<tr>
	<td>samp</td>
	<td>require</td>
	<td>必填效果</td>
	</tr>
	<tr>
	<td>input[text]</td>
	<td>longtxt</td>
	<td>长文本效果
	</td>
	</tr>
	</table>
	</div>	
	<div title='Demo' tabid='tab2'>
			<div>
				<div>
				    <h4><span>实例：编辑表单</span></h4>
				    <div style='padding-left:30px'>
					<form class="init ccay-form longtitle" >	
					<div class="ccay-form-body">
					 <ul>
						  <li class="ccay-form-row">
						 	<samp class="require">短文本（必填项）</samp>
						 	<span class='ccay-form-input'><input id='txtText'  type="text" /></span>
						 </li>
						 <li class="ccay-form-row">
							 <samp class="require">短文本（必填项）</samp>
							 <span class='ccay-form-input'><input id='txtDatepicker' class="init ccay-calendar" type="text" value="2012-02-13"/></span>
						 </li>
	 					  <li class="ccay-form-row">
						 	<samp>短文本（非必填项）</samp>
						 	<span class='ccay-form-input'><input id='txtText'  type="text" /></span>
						 </li>
	 					  <li class="ccay-form-row">
						 	<samp>长标题短文本testtesttesttesttesttesttesttesttesttesttesttesttest</samp>
						 	<span class='ccay-form-input'><input id='txtText'  type="text" /></span>
						 </li>
						<li class="ccay-form-row ccay-form-range">
								<samp class="i18n" i18nKey="时间范围"/>
								<span class='ccay-form-input'>
								  <input type="text" id="edit_test_StartTime"  class="init ccay-calendar"/>
								  <input type="text" id="edit_test_EndTime"  class="init ccay-calendar" /> 
								</span>
							</li>
						 <li class="ccay-form-row ccay-form-whole">
							 <samp>长文本区域asdasdasdasdadsadasdasdasdas</samp>
							 <span class='ccay-form-input'>
							 	<textarea></textarea>
							 </span>
						 </li> 
						 
						 <li class="ccay-form-row ccay-form-whole">
							 <samp>带字数限制提示长文本</samp>
							 <span class='ccay-form-input'>
							 	<textarea  textarea-maxlength="10"></textarea>
							 </span>
						 </li>
						 
						 
					</ul>
					</div>	
				<div class="ccay-form-custom">
					<ul>
					<li class="ccay-form-row">
						 <samp>内嵌表单</samp>
						 <span class='ccay-form-input'>
						 <div class="ccay-form-body">
						  <ul>
							  <li class="ccay-form-row">
							 	<samp>短文本</samp>
							 	<span class='ccay-form-input'><input id='txtText'  type="text" /></span>
							 </li>
							 <li class="ccay-form-row">
								 <samp>短文本</samp>
								 <span class='ccay-form-input'><input id='txtDatepicker1' class="init ccay-calendar" type="text" value="2012-02-13"/></span>
							 </li>
							 <li class="ccay-form-row ccay-form-whole">
								 <samp>长文本区域</samp>
								 <span class='ccay-form-input'>
								 	<textarea></textarea>
								 </span>
							 </li>
						 </ul>
						 </div>
						 </span>
					 </li> 
					</ul>
				</div>			    		         
					</form>
				<div>
				</div>
				<h3>HTML Code</h3>
				<div class="codeArea">
					<pre id='editForm'>
	&lt;!--<font color="green">所有的表单以form标签定义，class必须包括ccay-form，如果需要做验证的表单class加上init，</font><font color="red">longtitle:当title长度过长时，鼠标移到title处可现实全部内容</font>--&gt;
	&lt;form class="init ccay-form longtitle" &gt;	
	&lt;!--<font color="green">区域内容以div标签包括，基础class="ccay-form-body"</font>--&gt;
	&lt;div class="ccay-form-body"&gt;
	&lt;!--<font color="green">主内容使用ul标签</font>--&gt;
	 &lt;ul&gt;
	&lt;!--<font color="green">录入单位为一个title和一个input为主体，以li标签，基础class="ccay-form-row"，另外根据不同需求可以加入相应的class</font>--&gt;
		  &lt;li class="ccay-form-row"&gt;
	&lt;!--<font color="green">title使用为samp标签，无基础样式,class="require"生成必填项红色星号标志</font>--&gt;
		 	&lt;samp class="require"&gt;短文本（必填项）&lt;/samp&gt;
	&lt;!--<font color="green">input或者View内容使用span标签, class='ccay-form-input'</font>--&gt;
		 	&lt;span class='ccay-form-input'&gt;&lt;input id='txtText'  type="text" /&gt;&lt;/span&gt;
		 &lt;/li&gt;
		 &lt;li class="ccay-form-row"&gt;
			 &lt;samp class="require"&gt;短文本（必填项）&lt;/samp&gt;
	 &lt;span class='ccay-form-input'&gt;&lt;input id='txtDatepicker' 
	 class="init ccay-calendar" type="text" value="2012-02-13"/&gt;&lt;/span&gt;
		 &lt;/li&gt;
			  &lt;li class="ccay-form-row"&gt;
		 	&lt;samp&gt;短文本（非必填项）&lt;/samp&gt;
		 	&lt;span class='ccay-form-input'&gt;&lt;input id='txtText'  type="text" /&gt;&lt;/span&gt;
		 &lt;/li&gt;
			  &lt;li class="ccay-form-row"&gt;
	&lt;!--<font color="green">长标题显示样式</font>--&gt;
		 	&lt;samp&gt;长标题短文本testtesttesttesttesttesttesttesttesttesttesttesttest&lt;/samp&gt;
		 	&lt;span class='ccay-form-input'&gt;&lt;input id='txtText'  type="text" /&gt;&lt;/span&gt;
		 &lt;/li&gt;
	&lt;!--<font color="green">class="ccay-form-range" 范围选择或前后关联的两个input使用</font>--&gt;
		&lt;li class="ccay-form-row ccay-form-range"&gt;
				&lt;samp class="i18n" i18nKey="时间范围"/&gt;
				&lt;span class='ccay-form-input'&gt;
				  &lt;input type="text" id="edit_test_StartTime"  class="init ccay-calendar"/&gt;
				  &lt;input type="text" id="edit_test_EndTime"  class="init ccay-calendar" /&gt; 
				&lt;/span&gt;
			&lt;/li&gt;
	&lt;!--<font color="green">class="ccay-form-whole" 多行文本使用，固定为一整行，不随流布局变化</font>--&gt;
		 &lt;li class="ccay-form-row ccay-form-whole"&gt;
			 &lt;samp&gt;长文本区域testtesttesttesttesttesttesttesttesttesttest&lt;/samp&gt;
			 &lt;span class='ccay-form-input'&gt;
			 	&lt;textarea&gt;&lt;/textarea&gt;
			 &lt;/span&gt;
		 &lt;/li&gt;
	&lt;!--<font color="green">class="ccay-form-whole" 带字数限制提示长文本：</font>--&gt;
		 &lt;li class="ccay-form-row ccay-form-whole"&gt;
			 &lt;samp&gt;带字数限制提示长文本&lt;/samp&gt;
			 &lt;span class='ccay-form-input'&gt;
			 	&lt;textarea textarea-maxlength=“10”&gt;&lt;/textarea&gt;
			 &lt;/span&gt;
		 &lt;/li&gt;
	&lt;/ul&gt;
	&lt;/div&gt;
	&lt;!--<font color="green">内嵌表单样式	</font>--&gt;
	&lt;div class="ccay-form-custom"&gt;
	&lt;ul&gt;
	&lt;li class="ccay-form-row"&gt;
		 &lt;samp&gt;内嵌表单&lt;/samp&gt;
		 &lt;span class='ccay-form-input'&gt;
		 &lt;div class="ccay-form-body"&gt;
		  &lt;ul&gt;
			  &lt;li class="ccay-form-row"&gt;
			 	&lt;samp&gt;短文本&lt;/samp&gt;
			 	&lt;span class='ccay-form-input'&gt;&lt;input id='txtText'  type="text" /&gt;&lt;/span&gt;
			 &lt;/li&gt;
			 &lt;li class="ccay-form-row"&gt;
	&lt;samp&gt;短文本&lt;/samp&gt;
	&lt;span class='ccay-form-input'&gt;&lt;input id='txtDatepicker1' 
	class="init ccay-calendar" type="text" value="2012-02-13"/&gt;&lt;/span&gt;
	 		&lt;/li&gt;
			 &lt;li class="ccay-form-row ccay-form-whole"&gt;
				 &lt;samp&gt;长文本区域&lt;/samp&gt;
				 &lt;span class='ccay-form-input'&gt;
				 	&lt;textarea&gt;&lt;/textarea&gt;
				 &lt;/span&gt;
			 &lt;/li&gt;
		 &lt;/ul&gt;
		 &lt;/div&gt;
		 &lt;/span&gt;
	 &lt;/li&gt; 
	&lt;/ul&gt;
	&lt;/div&gt;			    		         
	&lt;/form&gt;
					</pre>
				</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#editDemo','',$('#editForm').html())">亲自试一试</a>
			</div>
				</div>
			</div>
	</div>
	</div>
	<div title="试一试" tabid="trytab" >
		    <fieldset class='ccay-demo'>
		    <legend ><h2>代码区</h2></legend>
			   
			   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 
	
					<div>
					    <table  style="width:100%;">
					      <tr>
					        <td style="width:100%;">
							<h3>js Code:</h3>	
							  <!-- 高度按需来调整。默认最小应为100px -->					
		                      <textarea id="jsTxt" style="height:100px;width:99%;"></textarea>
		                    </td>   
		                  </tr>
		                  <tr>
		                    <td style="width:100%;">
							<h3>html Code:</h3>
							  <!-- 高度按需来调整。默认最小应为100px -->
		                      <textarea id="htmlTxt" style="height:200px;width:99%;"></textarea>
		                    </td>
		                  </tr> 
	                    </table>
					</div>
	           </fieldset>
	        <fieldset class='ccay-demo'>
	          <legend ><h2>结果区</h2></legend>
				<div>
					<div style="overflow:auto;" id="demoMainPanel"></div>
				</div>
	        </fieldset>
	     </div>
	<div title="FAQ">
  <form class="init ccay-form">
	<div class="ccay-form-body ccay-form-custom">
	    <ul>                     
	        <li class="ccay-form-row">
	            <samp><h3>问题</h3></samp>
	           <span class="ccay-form-input">
	               <h3>解决方案</h3>
	           </span>
	        </li>
	        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
	        <li class="ccay-form-row">
	                          <samp class="i18n" i18nKey=""></samp>                          
	                         <span class="ccay-form-input"></span>
	        </li>  
	    </ul>
	</div>
  </form>                    
</div>  
</div>	 
